<template>
	<div id="tmp1">
		<!-- 图片分类 -->
		<div id="cate">
			<ul v-bind="{style:'width:'+ulWidth+'px'}">
				<li v-for="item in cates" @click="getimglist(item.id)">{{item.title}}</li>
			</ul>
		</div>
		<!-- 图片列表 -->
		<div id="imglist">
			<ul>
				<li v-for='item in list'>
					<router-link v-bind="{to:'/photo/photoinfo/' + item.id}" >
						<img v-lazy="item.img_url">
						<div id="desc">
							<h5 v-text='item.title'></h5>
							<p v-text='item.zhaiyao'></p>
						</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
import common from '../../kits/common.js'
import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				ulWidth:320,
				cates:[],
				list:[]    //图片数据的数组
			}
		},
		created(){
			this.getlisttitle();
			this.getimglist();
		},
		methods:{
			getimglist(cateid){
				cateid = cateid || 0;
				var url = common.apidomain + '/api/getimages/'+cateid;
				this.$http.get(url).then(function(res){
						if(res.body.status != 0){
							Toast(res.body.message);
							return;
						}
						this.list = res.body.message;
				})

			},
			getlisttitle(){
				var url = common.apidomain + '/api/getimgcategory';
				this.$http.get(url).then(function(res){
					if(res.body.status != 0){
						Toast(res.body.message);
						return;
					}
					this.cates = res.body.message;
					// 实现当前分类数据所在的ul的总宽度
					var w = 62;
					var count = res.body.message.length +1;
					this.ulWidth = w * count;
				})
			}
		}
	}
</script>

<style scoped>
	#cate{
	    overflow: auto;
	    background: #fff;
	    height: 40px;
	    line-height: 40px;
	}
	#cate ul{
		padding-left:10px;
		text-align: left;
		margin:0;
	}
	#cate li{
		list-style: none;
		display: inline-block;
		color:#0094ff;
		font-size:14px;
		padding:0 5px;
	}

	#imglist{}
	#imglist ul{
		padding-left:0;
	}
	#imglist li{
		list-style: none;
		width:100%;
		position:relative;
	}
	#imglist li img{
		width:94%;
		margin:5px auto;
	}
	#desc{
		position:absolute;
		bottom:0;
		width:100%;
		 background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.2));
	}

	image[lazy=loading] {
	  width: 40px;
	  height: 300px;
	  margin: auto;
	}
</style>